<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG Filters are 💕</title>

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg class="svg-fulscreen heart" viewBox="0 0 800 600">
  <filter
    id="filter-gooey"
    x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feGaussianBlur
      stdDeviation="10"
      x="0%" y="0%" width="100%" height="100%"
      edgeMode="none"
      in="SourceGraphic"
      result="blur"/>

    <feColorMatrix
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 19 -10"
      x="0%" y="0%" width="100%" height="100%"
      in="blur"
      result="colormatrix"/>
  </filter>

  <filter
    id="filter-heart-blur"
    x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

    <feGaussianBlur
      stdDeviation="1" x="0%" y="0%" width="100%" height="100%" edgeMode="none"
      result="blur"/>

    <feTurbulence
      type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="1" stitchTiles="stitch"
      result="turbulence"/>

    <feDisplacementMap
      scale="50"
      xChannelSelector="R" yChannelSelector="A"
      class="distortion-waves__map"
      in="blur" in2="turbulence"
      result="displacementMap"/>
  </filter>

  <mask id="mask"
    maskUnits="objectBoundingBox">
     <g filter="url(#filter-gooey)" fill="white">
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
      <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>

      <svg viewBox="0 0 400 600" preserveAspectRatio="xMidYMid meet">
        <svg viewBox="0 0 400 329" preserveAspectRatio="xMidYMid meet">
          <path d="M199.707062,328.924193 C306.1279,286.264571 371.305914,223.788236 395.241104,141.495189 C411.10542,86.9511117 389.083175,0.0955637558 302.216473,9.38591108e-05 C244.305338,-0.0635527387 210.135535,32.2422428 199.707062,96.9174805 C192.538642,32.3058894 159.023393,0.031917158 99.1613163,0.0955637558 C9.36820111,0.191033652 -11.317258,86.0580148 5.18615059,141.495189 C29.2163218,222.215775 94.0566258,284.692109 199.707062,328.924193 Z"></path>
        </svg>
      </svg>
    </g>
  </mask>

  <g
    mask="url(#mask)"
    filter="url(#filter-heart-blur)"
    fill="none"
    stroke-width="500"
    stroke-dasharray="52 260"
    class="heart__fill-circles-group">
    <circle r="250" cx="50%" cy="50%"
      stroke="crimson"
      class="heart__fill-circle"/>
    <circle r="250" cx="50%" cy="50%"
      stroke="gold"
      stroke-dashoffset="52"
      class="heart__fill-circle"/>
    <circle r="250" cx="50%" cy="50%"
      stroke="lightseagreen"
      stroke-dashoffset="104"
      class="heart__fill-circle"/>
    <circle r="250" cx="50%" cy="50%"
      stroke="yellowgreen"
      stroke-dashoffset="156"
      class="heart__fill-circle"/>
    <circle r="250" cx="50%" cy="50%"
      stroke="teal"
      stroke-dashoffset="208"
      class="heart__fill-circle"/>
    <circle r="250" cx="50%" cy="50%"
      stroke="orange"
      stroke-dashoffset="260"
      class="heart__fill-circle"/>
    <circle r="600" cx="50%" cy="50%"
      stroke-width="0"
      fill="transparent"/>
  </g>
</svg>
  
  

    <script  src="js/index.js"></script>




</body>

</html>
